@extends('WShop::layout')
@section('content')
    @include('WShop::public.header')
    @component('WShop::public.header')
        @slot('page_title'){{$page_title}} @endslot
    @endcomponent
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
        <div class="mui-scroll">

            <div class="mui-table-view mui-table-view-chevron mui-chaxun mui-bottom">
                <div class=" mui-fenlei bg-fff ">
                    <div class=" mui-text-center flex ">
                        @foreach(get_currency('id') as $id=>$title)
                        <div class="flex-item {{$money_type == $id ?'swiper-slide-actives':''}}"
                             data-url = "{{route('f_Wap_User_accountFlow',['mt'=>$id])}}"
                        >{{$title}}</div>
                        @endforeach

                    </div>
                </div>

                <div class="mui-zhuda">
                    @if($list->isNotEmpty())
                    <div class="mui-chaxun-list">
                        <div class="chaxun-list">
                            <p></p>
                            <ul class="mui-list-unstyled mui-clearfix" id="pull-load" data-change="{{json_encode(get_change())}}">
                                @foreach($list as $item)
                                <li class="bg-fff flex">
                                    @php
                                        $date = \Carbon\Carbon::parse($item->created_at)->toDateString();
                                        $time = \Carbon\Carbon::parse($item->created_at)->toTimeString();
                                    @endphp
                                    <p style="width: 120px;">{{$date}}</p>
                                    <div class="mui-ellipsis">
                                        <div>{{get_change($item->change_type)}}</div>
                                        <p>{{$time}}</p>
                                    </div>
                                    <div class="{{$item->inout == 1?'mui-text-red':'mui-text-blue'}} mui-text-right">{{$item->inout == 1?'+':'-'}}{{$item->money}}</div>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    @else
                        <div style="height: 110px;"></div>
                        <div class="mui-text-center">
                            <img src="{{asset(config('mall.wap_assets1').'/images/empty.png')}}" alt="" width="200">
                            <p style="margin-top: 50px;"><a href="javascript:void(0);" style="color: #fff;border: 1px solid #8a96a2;padding: 8px 24px;border-radius: 16px;background: #8a96a2;">暂无数据</a></p>
                        </div>

                    @endif

                </div>

            </div>
        </div>
    </div>
    @include('WShop::public.foot_bar',['active'=>'user'])
@endsection

@push('scripts')
    <script src="{{asset(config('view.plugin').'/other/day.js')}}"></script>
    <script>
        var btn=$('.mui-fenlei .flex-item')
        for (var i=0;i<btn.length;i++){
            btn[i].addEventListener('tap',function(){
                window.location.href =  $(this).data('url');
            })
        }
    </script>
    <script>
        var goodsItemTpl = '<li class="bg-fff flex">\n' +
            '<p style="width: 120px;">{%date%}</p>\n' +
            '<div class="mui-ellipsis"><div>{%title%}</div>\n' +
            '<p>{%time%}</p></div>\n' +
            '<div class="{%text_color%} mui-text-right">{%money%}</div>\n' +
            '</li>';

        var pageNum = 1;
        var changeType = $('#pull-load').data('change');
        mui.init({
            pullRefresh : {
                container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
                up : {
                    style: 'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                    color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
                    height: '50px',//可选,默认50px.下拉刷新控件的高度,
                    range: '100px', //可选 默认100px,控件可下拉拖拽的范围
                    offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
                    contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                    auto: false,//可选,默认false.首次加载自动上拉刷新一次
                    callback: function () {
                        pageNum = pageNum+1;
                        url = handleUrl(pageNum);
                        $.ajax({
                            type: 'get',
                            url: url,
                            dataType: 'json',
                        }).done(function (response) {

                            if(response.status){
                                data = response.data.list;
                                var len = data.length;
                                if(len<1){
                                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                                    mui('#pullrefresh').pullRefresh().disablePullupToRefresh();
                                    return true;
                                }
                                for (var i=0; i<len; i++){
                                    var dateObj = dayjs(data[i]['created_at']*1000);
                                    var goodsItem = goodsItemTpl;
                                    var inout = data[i]['inout']==1?'+':'-';
                                    var color = data[i]['inout']==1?'mui-text-red':'mui-text-blue';
                                    goodsItem = goodsItem.replace('{%date%}',dateObj.format('YYYY-MM-DD'))
                                        .replace('{%title%}',changeType[data[i]['change_type']])
                                        .replace('{%time%}',dateObj.format('HH:mm:ss'))
                                        .replace('{%text_color%}',color)
                                        .replace('{%money%}',inout+data[i]['money']);
                                    $("#pull-load").append(goodsItem);
                                }
                            }
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);

                            mui('#pullrefresh').pullRefresh().refresh(true);

                        }).fail(function (XMLHttpRequest) {
                            tooltips('网络异常,请检查连接');

                        }).always(function () {

                        });

                    }
                }
            }
        });

        function handleUrl(pageNum) {
            var url = window.location.href;
            if(url.indexOf("page_num=") >= 1){
                var u = url.split("page_num=");
            }else{
                if(url.indexOf("?") >= 1){
                    url = url+"&page_num="+pageNum;
                }else{
                    url = url+"?page_num="+pageNum;
                }
            }
            if(u) {
                var e = u[1].split("&");
                var d="";
                if(e.length > 1){
                    for(var i=0;i<e.length-1;i++){
                        d += "&"+e[i+1];
                    }
                }
                var url = u[0] + "page_num=" + pageNum+d;
            }

            return url
        }
    </script>
@endpush